<script setup lang="ts">
import { ref } from "vue";
import { useEditOstInfo } from "@/store/edit-ost-info";
import { useBillInfo } from "@/store/bill-info";
import router from "@/router";

const showFloatNav = ref(false);
window.addEventListener("scroll", function () {
  const scrollTop =
    document.documentElement.scrollTop || document.body.scrollTop;
  showFloatNav.value = scrollTop > 80;
});

const input = defineProps(["title"]);

function goBack(): void {
  const editInfo = useEditOstInfo();
  const billInfo = useBillInfo();
  editInfo.removeEditOstInfo();
  billInfo.removeBillInfo();
  router.back();
}
</script>

<template>
  <Transition name="fade">
    <div class="float-header-tally" v-if="showFloatNav">
      <van-nav-bar
        class="mt-[60px] text-white"
        style="background: transparent"
        :border="false"
        :title="input.title"
        @click-left="goBack"
        left-arrow
      />
    </div>
  </Transition>
</template>

<style scoped>
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.2s ease-in-out;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.float-header-tally {
  position: fixed;
  z-index: 999;
  top: 0;
  width: 100%;
  height: auto;
  background: #3b75fc;
  color: #ffffff;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}
</style>
